<template>
    <div class="type-movie flex-start-row">
        <div class="type-box space-between">
            <a class="type-link" v-for="(item, index) in typeList" @click="scrollIntoView(item.pinyin, index)"
                :style="{'background-color':(currentIndex===index ?'rgb(70, 170, 221)':' ')}">
                {{item.type}}
            </a>
        </div>
        <TypeContent v-for="(item, index) in typeList" :typeId="item.typeId" :offset-index="checkIndex - currentWeek">
            <template #default>
                <div :id="item.pinyin">{{ item.type }}</div>
                <div class="switch-bar">
                    <span class="switch-block block-active" :style="{left:(checkIndex - currentWeek) * 98 + 'px'}">占位</span>
                    <span class="switch-block" :class="{'active':1 === currentWeek}" v-if="1 >= currentWeek"
                        @click="changTime(1)">周一</span>
                    <span class="switch-block" :class="{'active':2 === currentWeek}" v-if="2 >= currentWeek"
                        @click="changTime(2)">周二</span>
                    <span class="switch-block" :class="{'active':3 === currentWeek}" v-if="3 >= currentWeek"
                        @click="changTime(3)">周三</span>
                    <span class="switch-block" :class="{'active':4 === currentWeek}" v-if="4 >= currentWeek"
                        @click="changTime(4)">周四</span>
                    <span class="switch-block" :class="{'active':5 === currentWeek}" v-if="5 >= currentWeek"
                        @click="changTime(5)">周五</span>
                    <span class="switch-block" :class="{'active':6 === currentWeek}" v-if="6 >= currentWeek"
                        @click="changTime(6)">周六</span>
                    <span class="switch-block" :class="{'active':7 === currentWeek}" v-if="7 >= currentWeek"
                        @click="changTime(7)">周日</span>
                </div>
            </template>
        </TypeContent>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import TypeContent from './TypeContent.vue';
import { useStore } from 'vuex'

const store = useStore()

interface IType {
    typeId: number;
    type: string;
    pinyin: string;
    currentWeek: number;
    checkIndex: number;
}

const typeList = ref<IType[]>()
let currentWeek = ref(parseInt('7123456'.charAt(new Date().getDay())))
let checkIndex = ref(parseInt('7123456'.charAt(new Date().getDay())))

store.dispatch('type/getAllTypes').then((res: any) => {
    typeList.value = res.data
})

console.log("typeList", typeList)

const currentIndex = ref<number>(-1)

const changTime = (index: number) => {
    checkIndex.value = index
}

const calcOffsetTop = (elements: HTMLElement): number => {
    let top = elements.offsetTop;
    let parent: any = elements.offsetParent;
    while (parent != null) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return top;
}

const scrollIntoView = (name: string, index: number) => {
    let offsetTop: number = calcOffsetTop(document.getElementById(name)!)

    window.scrollTo({
        top: offsetTop - 200,
        behavior: 'smooth',
    });
    // debugger
    clearColor(index)
}

window.addEventListener('scroll', function () {
    let htmlArr: NodeListOf<HTMLElement> = document.querySelectorAll('.type-title')
    for (let i = 0; i < htmlArr.length; i++) {
        if (calcOffsetTop(htmlArr[i] as HTMLElement) - document.documentElement.scrollTop < document.body.clientHeight / 2.8) {
            clearColor(i)
        }
    }
})

const clearColor = (index: number) => {
    let typeLink: NodeListOf<HTMLElement> = document.querySelectorAll('.type-link')
    for (let i = 0; i < typeLink.length; i++) {
        if (i == index) {
            currentIndex.value = index
        } else {
            typeLink[i].style.backgroundColor = ''
        }
    }
}
</script>

<style lang="less" scoped>
// 该变量关联MyHeader组件
@leftAndRight: 100px;
@headerHeight: 82.8px;

.type-movie {
    position: relative;
    width: 100%;
    color: white;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 1);
    flex-direction: column;
}

.switch-bar {
    position: relative;
    margin-left: 40px;
    border-radius: 10px;
    color: black;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    background-color: #ececec;
    user-select: none;
    text-align: center;

    .switch-block {
        padding: 0px 20px;
        width: 100px;

        letter-spacing: 1em;
        z-index: 5;
        border-radius: 10px;
        transition: 0.7s all;
    }

    .block-active {
        color: transparent;
        position: absolute;
        background-color: rgba(rgb(255, 119, 0), 0.3);
        left: 0;
        top: 0;
        z-index: 0;
        height: 100%;
    }

    .active {
        font-weight: 800;
        font-size: 18px;
    }
}

.type-box {
    position: sticky;
    top: @headerHeight;
    z-index: 10;
    width: 100%;
    padding: 15px @leftAndRight;
    background-color: rgb(41, 41, 41);

    .type-link {
        padding: 8px 20px;
        box-sizing: content-box;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        border-radius: 6px;
        color: #ececec;
        text-align: center;
        cursor: pointer;
        font-weight: 400;
        letter-spacing: 2px;
        transition: background-color .3s, color .3s;
    }

    .type-link:hover {
        background-color: rgb(70, 170, 221);
        color: white;
    }

}
</style>